<!DOCTYPE html>
<html  theme="system"  lang="en">
  <head>
<title>vue-codemirror | Homepage</title>
<meta name="twitter:widgets:new-embed-design" content="on">
<meta name="color-scheme" content="light dark">
<meta name="keywords" content="vue-codemirror examples,How to use vue-codemirror">
<meta name="description" content="vue-codemirror GitHub homepage">
<meta property="og:url" content="https://github.surmon.me/vue-codemirror">
<meta property="og:image" content="https://opengraph.githubassets.com/1701158654870/surmon-china/vue-codemirror">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="600">
<meta name="twitter:site" content="@surmon7788">
<meta name="twitter:creator" content="surmon7788">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="vue-codemirror | Homepage">
<meta name="twitter:image" content="https://opengraph.githubassets.com/1701158654870/surmon-china/vue-codemirror">
<meta name="twitter:description" content="vue-codemirror GitHub homepage">
<meta property="og:site_name" content="Surmon's open-source projects">
<meta property="og:type" content="object">
<meta property="og:title" content="vue-codemirror | Homepage">
<meta property="og:description" content="vue-codemirror GitHub homepage">
<meta property="og:image:alt" content="vue-codemirror GitHub homepage">
    <meta charset="UTF-8" />
    
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
    <link rel="alternate" type="image/png" href="/favicons/favicon.png" />
    <link rel="mask-icon" href="/favicons/pinned-octocat.svg" color="#000000" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Google search console -->
    <meta name="google-site-verification" content="CNWDKal1HwPI4bIhG5jkySW65FQxwPmYGt7K_gqjY38" />
    <!-- Google analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-WNSSKPKKMG"></script>
    <script>
      window.dataLayer = window.dataLayer || []
      function gtag() {
        dataLayer.push(arguments)
      }
      gtag('js', new Date())
      gtag('config', 'G-WNSSKPKKMG')
    </script>
    <script type="module" crossorigin src="/assets/index-3k4ISoYh.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/style-4KSdVc4m.css">
  </head>
  <body >
    <div id="app"><div class="vue-renderer" data-v-119d6462><header class="navbar" data-v-119d6462 data-v-6b27c662><div class="container" data-v-6b27c662><div class="left" data-v-6b27c662><a href="https://github.com/surmon-china" rel="external nofollow noopener" target="_blank" class="item github" data-v-6b27c662><i class="iconfont icon-github" data-v-6b27c662></i><span class="text" data-v-6b27c662>surmon-china</span></a><span class="dot" data-v-6b27c662>/</span><a href="https://github.com/surmon-china/vue-codemirror" rel="external nofollow noopener" target="_blank" class="item repository" data-v-6b27c662><span class="text" data-v-6b27c662>vue-codemirror</span></a></div><div class="right" data-v-6b27c662><button class="item theme" title="System theme" data-v-6b27c662><i class="icon-system-theme iconfont" data-v-6b27c662></i></button><div class="item project" data-v-6b27c662><span class="text" data-v-6b27c662>Projects</span><i class="iconfont icon-arrow-down" data-v-6b27c662></i><div class="mask" data-v-6b27c662></div><div class="projects" data-v-6b27c662><div class="container" data-v-6b27c662><div class="loading" data-v-6b27c662 data-v-0c9f81db><div class="animation" data-v-0c9f81db><!--[--><div data-v-0c9f81db></div><div data-v-0c9f81db></div><div data-v-0c9f81db></div><div data-v-0c9f81db></div><div data-v-0c9f81db></div><!--]--></div></div></div></div></div></div></div></header><div id="share" data-v-119d6462 data-v-53875fee><button class="share-button" title="Share to Twitter" data-v-53875fee><i class="iconfont icon-twitter" data-v-53875fee></i><span class="text" data-v-53875fee>Tweet</span></button></div><div id="toolbox" class="toolbox" data-v-119d6462 data-v-7bf94a39><div class="container" data-v-7bf94a39><div class="tools" data-v-7bf94a39><a href="https://github.com/sponsors/surmon-china" rel="external nofollow noopener" target="_blank" class="item sponsor" data-v-7bf94a39><i class="iconfont icon-heart" data-v-7bf94a39></i><i class="iconfont icon-heart-fill" data-v-7bf94a39></i></a><a href="https://github.com/surmon-china/vue-codemirror" rel="external nofollow noopener" target="_blank" class="item github" title="to GitHub homepage" data-v-7bf94a39><i class="iconfont icon-github" data-v-7bf94a39></i></a><button class="item to-top" data-v-7bf94a39><i class="iconfont icon-arrow-up" data-v-7bf94a39></i></button></div></div></div><!--[--><main class="homepage" data-v-909800f6><!----><div class="banner" data-v-909800f6 data-v-48961900><div class="banner-content" data-v-48961900><div class="title-skeleton" data-v-48961900><div class="skeleton" style="border-radius:2px;" data-v-48961900 data-v-7aefffbb></div></div><div class="subtitle-skeleton" data-v-48961900><div class="skeleton" style="border-radius:2px;" data-v-48961900 data-v-7aefffbb></div></div><div class="buttons-skeleton" data-v-48961900><!--[--><div class="item-skeleton" data-v-48961900><div class="skeleton" style="border-radius:2px;" data-v-48961900 data-v-7aefffbb></div></div><div class="item-skeleton" data-v-48961900><div class="skeleton" style="border-radius:2px;" data-v-48961900 data-v-7aefffbb></div></div><div class="item-skeleton" data-v-48961900><div class="skeleton" style="border-radius:2px;" data-v-48961900 data-v-7aefffbb></div></div><div class="item-skeleton" data-v-48961900><div class="skeleton" style="border-radius:2px;" data-v-48961900 data-v-7aefffbb></div></div><!--]--></div></div></div><div class="container" data-v-909800f6><div class="homepage-card homepage-mammon" data-v-909800f6 data-v-84eeb999><!----><div class="content" data-v-84eeb999><!--[--><!----><!--]--></div></div><!--[--><div class="homepage-card" data-v-84eeb999><div class="header" data-v-84eeb999><a href="https://github.com/surmon-china/surmon-china.github.io/tree/source/examples/vue-codemirror/index.vue" rel="external nofollow noopener" target="_blank" class="link" data-v-84eeb999><span data-v-84eeb999>Example Source Code</span><i class="iconfont icon-link-external" data-v-84eeb999></i></a><!--[-->❤︎<!--]--></div><div class="content" data-v-84eeb999><!--[--><div class="example" data-v-b435e2e0><div class="toolbar" data-v-b435e2e0 data-v-e5d92d5e><div class="item" data-v-e5d92d5e><label for="language" data-v-e5d92d5e>language:</label><select name="language" id="language" disabled value="javascript" data-v-e5d92d5e><!--[--><option value="brainfuck" data-v-e5d92d5e>brainfuck</option><option value="clojure" data-v-e5d92d5e>clojure</option><option value="coffeescript" data-v-e5d92d5e>coffeescript</option><option value="cpp" data-v-e5d92d5e>cpp</option><option value="css" data-v-e5d92d5e>css</option><option value="dockerfile" data-v-e5d92d5e>dockerfile</option><option value="erlang" data-v-e5d92d5e>erlang</option><option value="go" data-v-e5d92d5e>go</option><option value="html" data-v-e5d92d5e>html</option><option value="java" data-v-e5d92d5e>java</option><option value="javascript" data-v-e5d92d5e>javascript</option><option value="json" data-v-e5d92d5e>json</option><option value="jsx" data-v-e5d92d5e>jsx</option><option value="julia" data-v-e5d92d5e>julia</option><option value="lezer" data-v-e5d92d5e>lezer</option><option value="lua" data-v-e5d92d5e>lua</option><option value="markdown" data-v-e5d92d5e>markdown</option><option value="mysql" data-v-e5d92d5e>mysql</option><option value="nginx" data-v-e5d92d5e>nginx</option><option value="pascal" data-v-e5d92d5e>pascal</option><option value="perl" data-v-e5d92d5e>perl</option><option value="pgsql" data-v-e5d92d5e>pgsql</option><option value="php" data-v-e5d92d5e>php</option><option value="powershell" data-v-e5d92d5e>powershell</option><option value="python" data-v-e5d92d5e>python</option><option value="r" data-v-e5d92d5e>r</option><option value="ruby" data-v-e5d92d5e>ruby</option><option value="rust" data-v-e5d92d5e>rust</option><option value="scheme" data-v-e5d92d5e>scheme</option><option value="shell" data-v-e5d92d5e>shell</option><option value="sql" data-v-e5d92d5e>sql</option><option value="stylus" data-v-e5d92d5e>stylus</option><option value="swift" data-v-e5d92d5e>swift</option><option value="tcl" data-v-e5d92d5e>tcl</option><option value="toml" data-v-e5d92d5e>toml</option><option value="tsx" data-v-e5d92d5e>tsx</option><option value="typescript" data-v-e5d92d5e>typescript</option><option value="vb" data-v-e5d92d5e>vb</option><option value="vbscript" data-v-e5d92d5e>vbscript</option><option value="vue" data-v-e5d92d5e>vue</option><option value="xml" data-v-e5d92d5e>xml</option><option value="yaml" data-v-e5d92d5e>yaml</option><!--]--></select></div><div class="item" data-v-e5d92d5e><label for="theme" data-v-e5d92d5e>theme:</label><select name="theme" id="theme" disabled data-v-e5d92d5e><!--[--><option value="default" data-v-e5d92d5e>default</option><option value="amy" data-v-e5d92d5e>amy</option><option value="ayuLight" data-v-e5d92d5e>ayuLight</option><option value="barf" data-v-e5d92d5e>barf</option><option value="bespin" data-v-e5d92d5e>bespin</option><option value="birdsOfParadise" data-v-e5d92d5e>birdsOfParadise</option><option value="boysAndGirls" data-v-e5d92d5e>boysAndGirls</option><option value="clouds" data-v-e5d92d5e>clouds</option><option value="cobalt" data-v-e5d92d5e>cobalt</option><option value="coolGlow" data-v-e5d92d5e>coolGlow</option><option value="dracula" data-v-e5d92d5e>dracula</option><option value="espresso" data-v-e5d92d5e>espresso</option><option value="materialDark" data-v-e5d92d5e>materialDark</option><option value="noctisLilac" data-v-e5d92d5e>noctisLilac</option><option value="nord" data-v-e5d92d5e>nord</option><option value="oneDark" data-v-e5d92d5e>oneDark</option><option value="rosePineDawn" data-v-e5d92d5e>rosePineDawn</option><option value="smoothy" data-v-e5d92d5e>smoothy</option><option value="solarizedLight" data-v-e5d92d5e>solarizedLight</option><option value="tomorrow" data-v-e5d92d5e>tomorrow</option><!--]--></select></div><div class="item" data-v-e5d92d5e><label for="disabled" data-v-e5d92d5e>disabled:</label><input type="checkbox" id="disabled" disabled data-v-e5d92d5e></div><div class="item" data-v-e5d92d5e><label for="autofocus" data-v-e5d92d5e>autofocus:</label><input type="checkbox" id="autofocus" disabled checked data-v-e5d92d5e></div><div class="item" data-v-e5d92d5e><label for="indentWithTab" data-v-e5d92d5e>indentWithTab:</label><input type="checkbox" id="indentWithTab" disabled checked data-v-e5d92d5e></div><div class="item" data-v-e5d92d5e><label for="tabSize" data-v-e5d92d5e>tabSize:</label><select name="tabSize" id="tabSize" disabled data-v-e5d92d5e><!--[--><option value="2" data-v-e5d92d5e>2</option><option value="4" data-v-e5d92d5e>4</option><option value="6" data-v-e5d92d5e>6</option><option value="8" data-v-e5d92d5e>8</option><!--]--></select></div><div class="item" data-v-e5d92d5e><label for="height" data-v-e5d92d5e>height:</label><select name="height" id="height" disabled data-v-e5d92d5e><!--[--><option value="auto" data-v-e5d92d5e>auto</option><option value="200px" data-v-e5d92d5e>200px</option><option value="40em" data-v-e5d92d5e>40em</option><option value="60vh" data-v-e5d92d5e>60vh</option><!--]--></select></div></div><div class="divider" data-v-b435e2e0></div><div class="loading-box" data-v-b435e2e0><div class="loading" data-v-b435e2e0 data-v-0c9f81db><div class="animation" data-v-0c9f81db><!--[--><div data-v-0c9f81db></div><div data-v-0c9f81db></div><div data-v-0c9f81db></div><div data-v-0c9f81db></div><div data-v-0c9f81db></div><!--]--></div></div></div></div><!--]--></div></div><!--]--><!----></div></main><!--]--><footer class="footbar" data-v-119d6462 data-v-6630103c><div class="container" data-v-6630103c><span class="footer-content" data-v-6630103c><a href="https://github.com/surmon-china/vue-codemirror" rel="external nofollow noopener" target="_blank" data-v-6630103c>vue-codemirror</a><span data-v-6630103c> is maintained by </span><a href="https://github.com/surmon-china" rel="external nofollow noopener" target="_blank" data-v-6630103c>@surmon-china</a></span></div></footer></div></div>
  

</body>
</html>
